<template>
<div class="detail"  v-if="data">
	<div class="table" ref="view" id="print">
		<div class="table-header">
			<h3>{{data.info.ordername}}</h3>
			<p>怡生暖通有限公司</p>
		</div>
		<div class="table-body">
			<table class="obj-info">
				<tr>
					<td class="name">客户名称</td>
					<td>{{data.info.kehuchenghu}}</td>
					<td class="name">方案设计</td>
					<td>{{data.info.shejishi}}</td>
				</tr>
				<tr>
					<td class="name">方案面积</td>
					<td>{{data.info.xitongmianji}}m²</td>
					<td class="name">制单日期</td>
					<td>{{data.info.fanganriqi}}</td>
				</tr>
				<tr>
					<td class="name">客户地址</td>
					<td colspan="3">{{data.info.kehudizhi}}</td>
				</tr>
			</table>

			<div class="card project" v-for="(obj,index) in arr" :key="index">
				<template v-if="obj.data.length !== 0">
				<div class="card-header">
					<i class="el-icon-notebook-2"></i>
					<span>{{obj.name}}</span>
				</div>
				<div class="card-body">
					<table>
						<thead>
							<tr>
								<th>#</th>
								<th>项目名称/品牌</th>
								<th>图片</th>
								<th>功能作用</th>
								<th>单位</th>
								<th>售价</th>
								<template v-if="$store.state.print.list.a1">
								<th>数量</th>
								<th>方案1</th>
								</template>
								<template v-if="$store.state.print.list.a2">
								<th>数量</th>
								<th>方案2</th>
								</template>
								<template v-if="$store.state.print.list.a3">
								<th>数量</th>
								<th>方案3</th>
								</template>
								<template v-if="$store.state.print.list.a4">
								<th>数量</th>
								<th>方案4</th>
								</template>
								<template v-if="$store.state.print.list.a5">
								<th>数量</th>
								<th>方案5</th>
								</template>
							</tr>
						</thead>
						<tbody>
							<tr v-for="(item,index) in obj.data" :key="index">
								<template v-if="
								item.plan_num_1 == 0 &&
								item.plan_num_2 == 0 &&
								item.plan_num_3 == 0 &&
								item.plan_num_4 == 0 &&
								item.plan_num_5 == 0"></template>
								<template v-else>
								<td width="60px">{{index+1}}</td>
								<td width="100px" class="justify">{{item.name}}</td>
								<td width="80px"><img class="thumb" :src="`http://101.37.16.149/clientmanage/public/upload/${item.pic}`" alt="" v-img-preview></td>
								<td width="150px" class="justify">{{item.content}}</td>
								<td>{{item.unit}}</td>
								<td>￥{{$init.numberFormat(item.sellprice)}}</td>

								<template v-if="$store.state.print.list.a1">
								<td>{{item.plan_num_1}}</td>
								<td>￥{{$init.numberFormat(item.plan_price_1,0,'.',',')}}</td>
								</template>
								
								<template v-if="$store.state.print.list.a2">
								<td>{{item.plan_num_2}}</td>
								<td>￥{{$init.numberFormat(item.plan_price_2,0,'.',',')}}</td>
								</template>
								
								<template v-if="$store.state.print.list.a3">
								<td>{{item.plan_num_3}}</td>
								<td>￥{{$init.numberFormat(item.plan_price_3,0,'.',',')}}</td>
								</template>
								
								<template v-if="$store.state.print.list.a4">
								<td>{{item.plan_num_4}}</td>
								<td>￥{{$init.numberFormat(item.plan_price_4,0,'.',',')}}</td>
								</template>

								<template v-if="$store.state.print.list.a5">
								<td>{{item.plan_num_5}}</td>
								<td>￥{{$init.numberFormat(item.plan_price_5,0,'.',',')}}</td>
								</template>

								</template>
							</tr>
						</tbody>
					</table>
				</div>
				</template>
			</div>
			<div class="card project">
				<div class="card-header"> <i class="el-icon-notebook-2"></i>方案合计</div>
				<div class="card-body active total">
					<table>
						<thead>
							<tr>
								<th>方案版本</th>
								<th v-if="$store.state.print.list.a1">方案1</th>
								<th v-if="$store.state.print.list.a2">方案2</th>
								<th v-if="$store.state.print.list.a3">方案3</th>
								<th v-if="$store.state.print.list.a4">方案4</th>
								<th v-if="$store.state.print.list.a5">方案5</th>
							</tr>
						</thead>
						<tbody>
							<tr>
								<td class="name">总计金额</td>
								<td v-if="$store.state.print.list.a1">￥{{$init.numberFormat(tatal2.fangantotal1,0,',')}}</td>
								<td v-if="$store.state.print.list.a2">￥{{$init.numberFormat(tatal2.fangantotal2,0,',')}}</td>
								<td v-if="$store.state.print.list.a3">￥{{$init.numberFormat(tatal2.fangantotal3,0,',')}}</td>
								<td v-if="$store.state.print.list.a4">￥{{$init.numberFormat(tatal2.fangantotal4,0,',')}}</td>
								<td v-if="$store.state.print.list.a5">￥{{$init.numberFormat(tatal2.fangantotal5,0,',')}}</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="card project">
				<div class="card-header"> <i class="el-icon-notebook-2"></i>价格合计</div>
				<div class="card-body">
					<table>
						<tbody>
							<tr>
								<td class="name">系统费用</td>
								<td class="name">大写</td>
								<td>{{cn(xtfy)}}</td>
								<td class="name">小写</td>
								<td>
									<input type="number" class="num" v-model="xtfy" numberOnly>
								</td>
							</tr>
							<tr>
								<td class="name">系统税金</td>
								<td class="name">大写</td>
								<td>{{cn(xtsj)}}</td>
								<td class="name">小写</td>
								<td>
									<input type="number" class="num" v-model="xtsj" numberOnly>
								</td>
							</tr>
							<tr>
								<td class="name">方案合计</td>
								<td colspan="4">
									<span>{{cn(jisuan(xtfy,xtsj))}}(￥{{$init.numberFormat(jisuan(xtfy,xtsj))}})</span>
								</td>
							</tr>
						</tbody>
					</table>
				</div>
			</div>
			<div class="card remarks">
				<div class="card-header"> <i class="el-icon-notebook-2"></i>订单备注</div>
				<div class="card-body" style="font-size:12px;color:red">
					<div v-html="remarks"></div>
				</div>
			</div>
			<div class="card remarks">
				<div class="card-header"> <i class="el-icon-notebook-2"></i>订单说明</div>
				<div class="card-body" style="font-size:12px;">
					<div v-html="desc"></div>
				</div>
			</div>
		</div>
	</div>
	<div class="table-footer">
		<el-button-group class="btn">
			<el-button @click="close('/')" plain>关闭窗口</el-button>
			
			<el-button plain class="btn" @click="printPdf" v-if="isPhone">打印方案</el-button>
			<el-button plain class="btn" v-print="'#print'" v-else>打印方案</el-button>
		</el-button-group>
	</div>	
</div>
</template>
<script>
import { downloadPDF } from '@/util/pdf.js'
export default {
	name: 'Home',
	data(){
		return{
			type: 1,
			selected: true,
			loading: true,
			userinfo: '',
			desc: '',
			token: '',
			data: '',
			arr : [],
			total:[],
			total2:'',
			shui: 0,
			htmlTitle: '111111',
			remarks:'',
			xtfy: 0,
			xtsj: 0,
			isPhone: false
		}
	},
	components: {
		
	},
	watch:{
	},

	directives: {
        numberOnly: {
            bind: function(el) {
                el.handler = function() {
					el.value = el.value.replace(/\D+/, '');
                }
                el.addEventListener('input', el.handler)
            },
            unbind: function(el) {
                el.removeEventListener('input', el.handler)
            }
        }
    },
	mounted(){
		this.isMobile();
		let data   = this.$storage.localGet('userinfo');
		let id     = this.$route.params.id;
		if(data.logincode !== undefined){
			this.userinfo  = data;
			if(this.$store.state.print.list == null){
				this.$alert(`获取模板ID失败<br/>请返回重新选择后再来打印`, '错误', {
					confirmButtonText: '确定',
					type: 'error',
					dangerouslyUseHTMLString: true,
					callback: action => {
						this.$router.push(`/detail/${this.$route.params.id}`);
					}
				});
			}else{
				this.getorderdetail(id);
			}
		}else{
			this.$router.push('/login');
		}
	},
	methods:{
		isMobile() {
			let flag = /iPhone|iPad|iPod|Android/i.test(navigator.userAgent);
			this.isPhone = flag
		},
		printPdf() {
			console.log(this, 'vue实例');
			downloadPDF(document.getElementById('print'))
			// this.getPdf();
		},
		jisuan(val,val2){
			return parseFloat(val) + parseFloat(val2)
		},
		formatDate(timestamp) {
			var date = new Date(timestamp * 1000);//时间戳为10位需*1000，时间戳为13位的话不需乘1000
			var Y = date.getFullYear() + '-';
			var M = (date.getMonth()+1 < 10 ? '0'+(date.getMonth()+1):date.getMonth()+1) + '-';
			var D = (date.getDate()< 10 ? '0'+date.getDate():date.getDate())+ ' ';
			var h = (date.getHours() < 10 ? '0'+date.getHours():date.getHours())+ ':';
			var m = (date.getMinutes() < 10 ? '0'+date.getMinutes():date.getMinutes()) + ':';
			var s = date.getSeconds() < 10 ? '0'+date.getSeconds():date.getSeconds();
			return Y+M+D+h+m+s;
		},
		getorderdetail(id){
			let vm  = this;
			let arr = [];
			let arr2= [];
			let faid  = this.$route.params.project_id;
			vm.total= [];
			vm.heji = '';
			vm.$api.init.getorderdetail(vm.userinfo.logincode,id).then(res=> {
				let data = res.data;
				if(data.code == 0){
					vm.data = data;
					vm.remarks = data.info.beizhu;
					vm.desc = data.templateObj.shuoming.replace(/\r\n/g, '<br/>');

					vm.total.push(data.info);
					vm.tatal2 = data.info;
					console.log(data.info);
					data  = data.moduleProductList;
					for(let i = 0;i < data.length; i++){
						if(data[i].type == 1){
							arr.push({name:data[i].typename,mid: data[i].mod_id,data: []});
						}
						if(
							data[i].type == 2){
							arr2.push(data[i]);
						}
					}
					setTimeout(() => {
						for(let b = 0;b < arr2.length; b++){

							for(let c = 0; c < arr.length; c++){
								if(arr2[b].mod_id == arr[c].mid && arr2[b].type == 2){
									if(arr2[b].plan_num_1 ==0 && arr2[b].plan_num_2==0 && arr2[b].plan_num_3==0 && arr2[b].plan_num_4==0 && arr2[b].plan_num_5==0){
									}else{
										arr[c].data.push(arr2[b]);
									}
									
								}
							}
						}
					}, 500);
					vm.arr = arr;
					vm.loading = false;
				}else{
					vm.$alert(data.msg, '错误', {
						type: 'error',
						confirmButtonText: '确定',
						callback: action => {
							vm.$router.push('/')
						}
					});
				}
			})
		},
		time(date) {
			let dates = new Date(date);
			var y = dates.getFullYear();
			var m = dates.getMonth() + 1;
			m = m < 10 ? ('0' + m) : m;
			var d = dates.getDate();
			d = d < 10 ? ('0' + d) : d;
			var h = dates.getHours();
			h=h < 10 ? ('0' + h) : h;
			var minute = dates.getMinutes();
			minute = minute < 10 ? ('0' + minute) : minute;
			var second=dates.getSeconds();
			second=second < 10 ? ('0' + second) : second;
			return y + '-' + m + '-' + d;
			//下面注释好像有点问题,时间中0会舍去
		},
		close(url){
			this.$router.push(url);
		},
		prinfHandle() {
            this.$p({
                el: 'this.$refs.view',   //打印目标dom节点，eg: this.refs.view
                debug: true,             //打开调试模式，会显示iframe,
                importCss: true,         //引入head 中的link stylesheet
                importStyle: true,       //引入style标签中的样式
                loadCss: [],             //需要载入的第三方样式表
                title: '',               //打印标题
                delay: 300,              //延迟打印时间，确保iframe中的静态资源加载完成
                beforePrinfHandle: null, //打开打印窗口前的钩子函数,可以针对打印文档进行自定义调整，接受一个document参数
                afterPrintHandle: null,  //打印完成的钩子函数,
            });
        },
		cn(money){
			var cnNums = new Array('零', '壹', '贰', '叁', '肆', '伍', '陆', '柒', '捌', '玖');
			//基本单位
			var cnIntRadice = new Array('', '拾', '佰', '仟');
			//对应整数部分扩展单位
			var cnIntUnits = new Array('', '万', '亿', '兆');
			//对应小数部分单位
			var cnDecUnits = new Array('角', '分', '毫', '厘');
			//整数金额时后面跟的字符
			var cnInteger = '整';
			//整型完以后的单位
			var cnIntLast = '元';
			//最大处理的数字
			var maxNum = 999999999999999.9999;
			//金额整数部分
			var integerNum;
			//金额小数部分
			var decimalNum;
			//输出的中文金额字符串
			var chineseStr = '';
			//分离金额后用的数组，预定义
			var parts;
			if (money == '') { return ''; }
			money = parseFloat(money);
			if (money >= maxNum) {
				//超出最大处理数字
				return '';
			}
			if (money == 0) {
				chineseStr = cnNums[0] + cnIntLast + cnInteger;
				return chineseStr;
			}
			//转换为字符串
			money = money.toString();
			if (money.indexOf('.') == -1) {
				integerNum = money;
				decimalNum = '';
			} else {
				parts = money.split('.');
				integerNum = parts[0];
				decimalNum = parts[1].substr(0, 4);
			}
			//获取整型部分转换
			if (parseInt(integerNum, 10) > 0) {
				var zeroCount = 0;
				var IntLen = integerNum.length;
				for (var i = 0; i < IntLen; i++) {
				var n = integerNum.substr(i, 1);
				var p = IntLen - i - 1;
				var q = p / 4;
				var m = p % 4;
				if (n == '0') {
					zeroCount++;
				} else {
					if (zeroCount > 0) {
					chineseStr += cnNums[0];
					}
					//归零
					zeroCount = 0;
					chineseStr += cnNums[parseInt(n)] + cnIntRadice[m];
				}
				if (m == 0 && zeroCount < 4) {
					chineseStr += cnIntUnits[q];
				}
				}
				chineseStr += cnIntLast;
			}
			//小数部分
			if (decimalNum != '') {
				var decLen = decimalNum.length;
				for (var i = 0; i < decLen; i++) {
				var n = decimalNum.substr(i, 1);
				if (n != '0') {
					chineseStr += cnNums[Number(n)] + cnDecUnits[i];
				}
				}
			}
			if (chineseStr == '') {
				chineseStr += cnNums[0] + cnIntLast + cnInteger;
			} else if (decimalNum == '') {
				chineseStr += cnInteger;
			}
			return chineseStr;
		}
	}
}
</script>
<style lang="less" scoped>
.detail{
	color: #333;
	width: 100%;    
	height: 100%;
	bottom: 0;
	top: 0;
	overflow-y: scroll;
    position: absolute;
	-webkit-print-color-adjust: exact;
	background-color: #fff;
	.table{
		width: 1000px;
		height: auto;
		margin: 0 auto;
		padding: 30px 50px;
		background-color: #fff;
	}
	.btn{
		width: 500px;
		display: block;
		text-align: center;
		margin: 30px auto;
		display: flex;
		.el-dropdown,
		.el-button{
			flex: 1;
			width: 100%;
			margin: 0 2px;
			text-align: center;
			border-radius: 5px;
			border-color: #409EFF;
			color: #409EFF;
			/deep/span{
				width: 100%;
				display: block;
				text-align: center;
			}
		}
	}
}
</style>
<style lang="less">
body,html{
	background-color: #fff;
}
#print{
	.table-header{
		padding: 10px 0 20px;
		text-align: center;
		position: relative;
		h3{
			font-weight: 500;
			font-size: 20px;
			position: relative;
			i{
				font-size: 12px;
				margin-left: 5px;
				position: absolute;
				top: 15px;
			}
		}
		p{
			color: #555;
		}
	}
	.tab-body{
		background-color: #fff;
	}
	.card{
		margin: 3px 0;
		background-color: #fff;
		transition: .3s;
		.card-header{
			height: 50px;
			font-size: 14px;
			line-height: 50px;
			font-weight: 700;
			cursor: pointer;
			user-select: none;
			display: flex;
			align-items: center;
			i{
				color: #555;
				margin-right: 6px;
			}
		}
		.card-body{
			height: auto;
			background-color: #fff;
			transition: 0.3s;
			/deep/.total{
				th{
					background: #F5F7FA;
				}
			}
		}
	}
	table{
		width: 100%;
		border-collapse: collapse;
		border-spacing: 0;
		tr,td,th{
			padding: 8px 10px;
			font-size: 12px;
			border: 1px solid #333;
		}
		thead{
			background-color: #c7d3e6;
		}
		.thumb{
			width: 100%;
			display: block;
		}
	}
	.project{
		td{
			text-align:center;
		}
		td.justify{
			text-align:justify;
		}
	}
	.name{
		width: 120px;
		font-weight: 500;
		text-align: center;
	}
	.remarks{
		font-size: 14px;
	}
	input.num{
		width: 100%;
		display: block;
		text-align: center;
		padding: 5px;
		border: 1px solid #fff;
		outline: none;
		margin: 0 auto;
		background-color: rgba(0,0,0,0);
		&:focus{
			color: #FA6400;
			border-color: #FA6400;
			background-color: #fa64001e;
		}
	}
	input[type=number] {
		&::-webkit-outer-spin-button,
		&::-webkit-inner-spin-button {
			-webkit-appearance: none;
		}
		-moz-appearance: textfield;
	}
	/deep/.el-textarea__inner{
		height: 150px;
		border-radius: 0;
		outline: none;
		border: 1px solid #333;
	}
}
</style>